<template>
  <div>
    <el-upload
      :key="fileKey"
      v-model="value"
      :data="qiniuDataObj"
      accept="image/png,image/jpeg,image/jpg"
      show-file-list
      :on-preview="handlePictureCardPreview"
      :on-success="handleSuccess"
      :on-remove="handleRemove"
      :on-exceed="handleExceed"
      :file-list="showList"
      :disabled="isDisabled"
      :limit="maxLimit"
      :action="baseApi+'/file/upload'"
      list-type="picture-card"
      multiple>
      <i slot="default" class="el-icon-plus"></i>
      <div slot="file" slot-scope="{file}">
        <img
          class="el-upload-list__item-thumbnail"
          :src="file.url" alt=""
        >
        <span class="el-upload-list__item-actions">
        <span
          class="el-upload-list__item-preview"
          @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
        </span>
        <span
          v-if="!isDisabled"
          class="el-upload-list__item-delete"
          @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
      </div>
    </el-upload>
    <el-dialog key="imgShow" :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>

  export default {
    props: {
      value: {
        type: String
      }, isDisabled: {
        default: false
      }, fileKey: { default: '' },
      maxLimit: { default: 20 }
    },
    data() {
      return {
        showList: [],
        waitFileList: [],
        qiniuDataObj: { token: '' },
        fileUrl: process.env.VUE_APP__FILE_URL,
        baseApi: process.env.VUE_APP_FILE_UP_API,
        dialogImageUrl: null,
        dialogVisible: false,
        disabled: false
      }
    },
    watch: {
      value() {
        this.showList = []
        if (this.value != null) {
          var json
          try {
            json = JSON.parse(this.value)
          } catch (e) {
            json = [{ url: this.value }]
            this.$emit('input', JSON.stringify([{ url: this.value }]))
          }
          for (let j = 0; j < json.length; j++) {
            var httpUrl = json[j].url
            if (httpUrl.indexOf('http') !== 0) {
              // eslint-disable-next-line no-const-assign
              httpUrl = this.fileUrl + httpUrl
            }
            this.showList.push({
              name: json[j].name,
              url: httpUrl,
              response: { key: json[j].url }
            })
          }
        }
      },
      fileKey(newQuestion, oldQuestion) {
        this.showList = []
        if (this.value != null) {
          var json
          try {
            json = JSON.parse(this.value)
          } catch (e) {
            json = [{ url: this.value }]
            this.$emit('input', JSON.stringify([{ url: this.value }]))
          }
          for (let j = 0; j < json.length; j++) {
            var httpUrl = json[j].url
            if (httpUrl.indexOf('http') !== 0) {
              // eslint-disable-next-line no-const-assign
              httpUrl = this.fileUrl + httpUrl
            }
            this.showList.push({
              name: json[j].name,
              url: httpUrl,
              response: { key: json[j].url }
            })
          }
        }
      }
    },
    created() {
      this.showList = []
      if (this.value != null) {
        var json
        try {
          json = JSON.parse(this.value)
        } catch (e) {
          json = [{ url: this.value }]
          this.$emit('input', JSON.stringify([{ url: this.value }]))
        }
        for (let j = 0; j < json.length; j++) {
          var httpUrl = json[j].url
          if (httpUrl.indexOf('http') !== 0) {
            // eslint-disable-next-line no-const-assign
            httpUrl = this.fileUrl + httpUrl
          }
          this.showList.push({
            name: json[j].name,
            url: httpUrl,
            response: { key: json[j].url }
          })
        }
      }
    },
    methods: {
      handleExceed(files, fileList) {
        this.$message.warning('只可上传' + this.maxLimit + '张图片，请勿超过数量')
      },
      // 放大显示图片
      handlePictureCardPreview(file) {
        console.log(file)
        if (file.response.key != null) {
          if (file.response.key.indexOf('http') === 0) {
            window.open(file.response.key)
          } else {
            window.open(this.fileUrl + file.response.key)
          }

        } else {
          window.open(this.fileUrl + file.response.data.address)
        }
      },
      // 上传成功回调
      handleSuccess(res, file, fileList) {
        if (this.waitFileList.length == 0 && this.value != null) {
          this.waitFileList = JSON.parse(this.value)
        }
        this.waitFileList.push({ url: res.data.address, name: res.data.originalName })
        if (this.waitFileList.length == fileList.length) {
          this.$emit('input', JSON.stringify(this.waitFileList))
          this.waitFileList = []
        }
      },
      // 删除回调
      handleRemove(file, fileList) {
        var json
        if (this.value == null) {
          json = []
        } else {
          try {
            json = JSON.parse(this.value)
          } catch (e) {
            json = [{ url: this.value }]
          }
        }
        json.splice({ url: file.url, name: file.name }, 1)
        if (json.length === 0) {
          this.$emit('input', null)
        } else {
          this.$emit('input', JSON.stringify(json))
        }
      }
    }
  }
</script>

<style scoped>

</style>
